<template>
  <div>
    <div class="ruleequipment-tab-title-row">
      <div
        @click="ruleequipmenttype = 1"
        :class="ruleequipmenttype == 1 ? 'ruleequipmenttype_on' : ''"
      >
        规则设备
      </div>
      <div
        @click="ruleequipmenttype = 2"
        :class="ruleequipmenttype == 2 ? 'ruleequipmenttype_on' : ''"
      >
        设备规则
      </div>
    </div>

    <div
      class="working-hours-container rule-to-equipment-row"
      :style="ruleequipmenttype == 1 ? 'display:block' : 'display:none'"
    >
      <!--规则列表-->
      <div class="r-t-e-rule-row">
        <el-form :inline="true">
          <el-form-item>
            <el-button type="primary" plain @click="handledialogruleVisible"
              >新增</el-button
            >
            <el-button type="primary" plain @click="handleEdit">编辑</el-button>
            <el-button type="primary" plain @click="handleDelete"
              >删除</el-button
            >
          </el-form-item>
        </el-form>
        <el-scrollbar
          wrap-class="scrollbar-wrapper"
          style="height: calc(100% - 8vh)"
        >
          <el-table
            ref="multipleTable"
            :data="RtEtableData"
            highlight-current-row
            @selection-change="handleRtEtableSelectionChange"
            @row-click="handleRtQruleChange"
            :row-class-name="tableRowClassName"
            border
            tooltip-effect="dark"
            style="width: auto; overflow: hidden"
            :row-key="
              (row) => {
                return row.id;
              }
            "
          >
            <el-table-column
              type="selection"
              width="40"
              :reserve-selection="true"
            >
            </el-table-column>
            <el-table-column type="index" label="序号" width="50">
            </el-table-column>
            <el-table-column prop="name" label="规则名称"> </el-table-column>
            <el-table-column prop="workType" label="控制类型">
              <template slot-scope="scope">
                <span>{{ scope.row.workType | typefilters }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="dayType" label="工作日类型">
              <template slot-scope="scope">
                <span>{{ scope.row.dayType | worktypefilters }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="startTime" label="起始时间">
            </el-table-column>
            <el-table-column prop="endTime" label="结束时间"> </el-table-column>
          </el-table>
          <el-pagination
            :page-sizes="[10, 20, 30, 40]"
            :page-size="rterulepageSize"
            @size-change="rterulehandleSizeChange"
            layout="total, sizes, prev, pager, next, jumper"
            :total="rteruletotal"
            style="text-align: right"
            :current-page="rterulecurrentPage"
            @current-change="rtehandlePageChange"
          >
          </el-pagination>
        </el-scrollbar>
      </div>
      <!--设备列表-->
      <div class="r-t-e-equipment-row">
        <div class="equipment-add">
          <div>{{gztitle}}---设备列表</div>
          <div>
            <el-button type="primary" size="small" @click="handleAddequipment()"
              >添加设备</el-button
            >
            <el-button type="primary" size="small" @click="handleDelequipment()"
              >移除设备</el-button
            >
          </div>
        </div>

        <el-scrollbar
          wrap-class="scrollbar-wrapper"
          style="height: calc(100% - 8vh)"
        >
          <el-table
            :data="equipmentData"
            ref="equipmentTable"
            @selection-change="handequipmentChange"
            border
            style="width: 100%; margin-top: 10px"
          >
            <el-table-column type="selection" width="40"> </el-table-column>
            <el-table-column type="index" label="序号" width="50">
            </el-table-column>
            <el-table-column prop="name" label="名称"> </el-table-column>
            <el-table-column prop="typeName" label="类型"> </el-table-column>
            <el-table-column prop="path" label="区域"> </el-table-column>
          </el-table>
        </el-scrollbar>
      </div>
      <!-- 规则 -->
    </div>
    <div
      class="working-hours-container equipment-to-rule-row"
      :style="ruleequipmenttype == 2 ? 'display:block' : 'display:none'"
    >
      <div class="e-t-r-equipment-row">
        <div class="equipment-add">
          <div>设备列表</div>
        </div>

        <el-scrollbar
          wrap-class="scrollbar-wrapper"
          style="height: calc(100% - 8vh)"
        >
          <el-table
            ref="refEtRequipmentdata"
            :data="EtRequipmentdata"
            border
            highlight-current-row
            :row-class-name="tableRowEtRequipmentClassName"
            @row-click="handleEtRequipmentChange"
            style="width: 100%; margin-top: 10px"
            :row-key="
              (row) => {
                return row.id;
              }
            "
          >
            <el-table-column type="index" label="序号" width="60">
            </el-table-column>
            <el-table-column prop="name" label="名称" style="cursor: pointer">
            </el-table-column>
            <el-table-column
              prop="typeName"
              label="类型"
              style="cursor: pointer"
            >
            </el-table-column>
            <el-table-column prop="path" label="区域" style="cursor: pointer">
            </el-table-column>
          </el-table>
          <el-pagination
            :page-sizes="[10, 20, 30, 40]"
            :page-size="etrequipmentpageSize"
            @size-change="etrequipmenthandleSizeChange"
            layout="total, sizes, prev, pager, next, jumper"
            :total="etrequipmenttotal"
            style="text-align: right"
            :current-page="etrequipmentcurrentPage"
            @current-change="etrequipmenthandlePageChange"
          >
          </el-pagination>
        </el-scrollbar>
      </div>
      <div class="e-t-r-rule-row">
        <div class="e-t-r-rule-box">
          <div class="left">
            <el-scrollbar
              wrap-class="scrollbar-wrapper"
              style="width: 100%; height: 100%"
            >
              <h4>设备已有规则：</h4>
              <el-tree
                :data="haveEtRRuleData"
                :indent="40"
                ref="refhaveEtRRuleData"
                show-checkbox
                node-key="id"
                :props="defaultProps"
                @check="handleEtRRuleDataGroupSel"
                :default-expanded-keys="expandedEtRRuleKeys"
              >
              </el-tree>
            </el-scrollbar>
          </div>
          <div class="dialog-group-btn">
            <el-button
              @click="dialogHandleGroupChange('add')"
              :disabled="multipleEtRRuleAvailableGroupSel.length == 0"
              size="small"
              type="primary"
              icon="el-icon-d-arrow-left"
              >新 增
            </el-button>
            <el-button
              @click="dialogHandleGroupChange('delete')"
              :disabled="multipleEtRRuleGroupSel.length == 0"
              size="small"
              type="primary"
              >移 除 <i class="el-icon-d-arrow-right"></i
            ></el-button>
          </div>
          <div class="right">
            <el-scrollbar
              wrap-class="scrollbar-wrapper"
              style="width: 100%; height: 100%"
            >
              <h4>可选规则：</h4>
              <el-tree
                :data="availableEtRRuleData"
                :indent="40"
                show-checkbox
                node-key="id"
                ref="refavailableEtRRuleData"
                @check="handleAvailableEtRRuleDataGroupSel"
                :props="defaultProps"
                :default-expanded-keys="expandedAvailableEtRRuleKeys"
              >
              </el-tree>
            </el-scrollbar>
          </div>
          <div style="margin-top: 20px; text-align: right"></div>
        </div>
      </div>
    </div>
    <el-dialog
      class="add-user-dia"
      :title="isAddNew ? '添加规则' : '编辑规则'"
      :visible.sync="dialogruleVisible"
      width="680px"
      @close="resetRtEForm"
      :close-on-click-modal="false"
    >
      <el-form
        :model="RtEruleForm"
        status-icon
        :rules="RtErulesForm"
        ref="RtEForm"
        label-position="right"
        label-width="120px"
      >
        <el-form-item label="规则名称" prop="name">
          <el-input v-model="RtEruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="控制类型" prop="workType">
          <el-radio-group v-model="RtEruleForm.workType">
            <el-radio :label="0">常开</el-radio>
            <el-radio :label="1">常关</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="工作日类型"
          prop="dayType"
          class="dialogrule_worktype"
        >
          <el-radio-group v-model="RtEruleForm.dayType">
            <el-radio :label="item.dayType" v-for="item in Defaultoptionslist" :key="item.dayType">{{item.dayName}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="开始时间" prop="startTime">
          <el-time-picker
            v-model="RtEruleForm.startTime"
            value-format="HH:mm"
            format="HH:mm"
            placeholder="选择开始时间"
          >
          </el-time-picker>
        </el-form-item>
        <el-form-item label="结束时间" prop="endTime">
          <el-time-picker
            v-model="RtEruleForm.endTime"
            value-format="HH:mm"
            format="HH:mm"
            placeholder="选择结束时间"
            :picker-options="{
              selectableRange: `${
                RtEruleForm.startTime
                  ? RtEruleForm.startTime + ':00'
                  : '00:00:00'
              }-23:59:59`,
            }"
          >
          </el-time-picker>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          v-if="isAddNew"
          @click="addWorkingRuleSubmit('RtEForm')"
          >确 定</el-button
        >
        <el-button
          v-else
          type="primary"
          @click="editWorkingRuleSubmit('RtEForm')"
          >确 定</el-button
        >
        <el-button @click="dialogruleVisible = false">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="添加设备"
      :visible.sync="dialogAddAreaVisible"
      width="500px"
      :close-on-click-modal="false"
    >
      <div>
        <div class="equipment-title">
          <h4
            style="margin-right: 20px; display: inline-block; min-width: 56px"
          >
            设备类型
          </h4>
          <el-checkbox-group v-model="checkList">
            <el-checkbox
              v-for="item in channelTargetCategory"
              :key="item.id"
              :label="item.id"
            >
              {{ item.name }}
            </el-checkbox>
          </el-checkbox-group>
        </div>

        <h4 style="margin-right: 20px; display: inline-block">选择网点</h4>
        <el-select
          v-model="organId"
          @change="selectOrganChange"
          placeholder="请选择"
        >
          <el-option
            v-for="item in organOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </div>
      <div style="height: 300px">
        <el-scrollbar wrap-class="scrollbar-wrapper" style="height: 100%">
          <el-tree
            :data="areaTreeData"
            ref="refdialogAreaTree"
            show-checkbox
            node-key="id"
            :props="defaultProps"
            @check="dialogTreeChange"
          >
          </el-tree>
        </el-scrollbar>
      </div>

      <div style="text-align: center; margin-top: 20px">
        <el-button size="medium" type="primary" @click="submitAddAreaquipment"
          >确 定</el-button
        >
        <el-button size="medium" @click="dialogAddAreaVisible = false"
          >取 消</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import ajax from "@/utils/ajax";
import { tableSelection, deleteConfirm } from "@/utils/elementui";
let Defaultoptionslistc=[]
export default {
  data() {
    return {
      RtEruleid: 0,
      RtEruleindex: 0,
      RtEtableIndex: 0,
      RtEtableData: [],
      RtEtableSelection: [],
      isAddNew: true,
      RtEruleForm: {
        dayType: 1,
        name: "",

        workType: 0,
        endTime: "",
        startTime: "",
      },
      equipmentData: [],
      quipmenSelection: [],
      dialogruleVisible: false,
      defaultProps: {
        children: "children",
        label: "name",
      },
      organId: null,
      organOptions: [],

      dialogAddAreaVisible: false,
      channelTargetCategory: [],
      targetCategoryIds: [],
      checkList: [],
      dialogAreaNodeCheck: [],
      ruleequipmenttype: 1,
      tableIndex: 0,
      tableEtRequipmentIndex: 0,
      EtRequipmentprobeId: 0,
      EtRequipmentprobeChannel: 0,
      EtRequipmentdata: [],
      haveEtRRuleData: [],
      availableEtRRuleData: [],
      multipleEtRRuleGroupSel: [],
      multipleEtRRuleAvailableGroupSel: [],
      expandedEtRRuleKeys: [],
      expandedAvailableEtRRuleKeys: [],
      //规则翻页
      rteruletotal: 0,
      rterulecurrentPage: 1,
      rterulepageSize: 10,
      RtErulesForm: {
        name: [{ required: true, message: "请输入规则名称", trigger: "blur" }],
        startTime: [
          { required: true, message: "请选择开始时间", trigger: "change" },
        ],
        endTime: [
          { required: true, message: "请选择结束时间", trigger: "change" },
        ],
        workType: [
          { required: true, message: "请选择工作日类型", trigger: "change" },
        ],
        dayType: [
          { required: true, message: "请填写控制类型", trigger: "change" },
        ],
      },
      customerId: this.$store.getters.customerId,
      areaTreeData: [],
      //设备翻页
      etrequipmenttotal: 0,
      etrequipmentcurrentPage: 1,
      etrequipmentpageSize: 10,
      Defaultoptionslist:[],
      gztitle:''
    };
  },
  mounted() {
    this.getCustomerAvailableData()
    this.getTargetCategoryData();
    this.getOrganListData();
    this.getrRtEruledata();
    this.getEtRequipmentdata();
  },
  methods: {
    //获得规则
    getrRtEruledata() {
      let self = this;
      ajax.get({
        url: this.$API.queryWorkingRule+`${this.rterulecurrentPage}/${this.rterulepageSize}`,
        success: (res) => {
          let resp = res.data.records;
          self.RtEtableData = resp;
          self.rteruletotal = res.data.recordNum;
          if (resp!=null && resp.length > 0) {
            self.$nextTick(() => {
              let index = self.RtEtableIndex;
              self.$refs.multipleTable.setCurrentRow(
                self.$refs.multipleTable.data[index]
              );
              self.gztitle=self.RtEtableData[index].name
              self.RtEruleid = self.RtEtableData[index].id;
              self.getRtERequipmentdata();
            });
          } else {
            this.RtEtableData = [];
          }
        },
      });
    },
    //添加规则表单
    handledialogruleVisible() {
      this.isAddNew = true;
      this.dialogruleVisible = true;
    },
    // 规则表单重置
    resetRtEForm() {
      this.$refs["RtEForm"].resetFields();
    },
    //添加规则
    addWorkingRuleSubmit(formName) {
     
      let self = this;
       self.RtEruleForm.startTime =  self.RtEruleForm.startTime + ":00"
       self.RtEruleForm.endTime =  self.RtEruleForm.endTime + ":00"
      this.$refs[formName].validate((valid) => {
        if (valid) {
          ajax.post({
            url: this.$API.addWorkingRule,
            data: self.RtEruleForm,
            success: (response) => {
              //console.log(response)
              if (response.success) {
                this.dialogruleVisible = false;
                // 成功后，重新获取数据
                this.$message({
                  type: "success",
                  message: response.message,
                });
                self.getrRtEruledata();
                this.getavailableEtRRuleData();
                this.gethaveEtRRuleData();
              }
            },
            error: (res) => {
              //console.log(res)
              this.$message({
                message: res.message,
                type: "error",
              });
            },
          });
        }
      });
    },
    //多选
    handleRtEtableSelectionChange(val) {
      this.RtEtableSelection = val;
    },
    //删除规则
    handleDelete() {
      let self = this;
      let selectionArr = this.RtEtableSelection;
      let selResult = tableSelection(selectionArr, 0);
      if (selResult) {
        deleteConfirm(this).then((res) => {
          if (res) {
            let idsArr = [];
            for (let item of selectionArr) {
              idsArr.push(item.id);
            }
            let ids = idsArr.join(",");
            ajax.post({
              url: this.$API.DeleteWorkingRule + ids,
              success: (response) => {
                //console.log(response)
                if (response.success) {
                  // 成功后，重新获取数据
                  self.getrRtEruledata();

                  //设备列表刷新
                  this.getEtRequipmentdata();
                  this.getavailableEtRRuleData();
                  this.gethaveEtRRuleData();
                  self.$refs.multipleTable.clearSelection();
                  self.$message({
                    type: "success",
                    message: response.message,
                  });
                }
              },
              error: (res) => {
                //console.log(res)
                this.$message({
                  message: res.message,
                  type: "error",
                });
              },
            });
          }
        });
      }
    },
    //编辑规则
    handleEdit() {
      let self = this;
      let selectionArr = this.RtEtableSelection;
      let selResult = tableSelection(selectionArr, 1);
      if (selResult) {
        self.isAddNew = false;
        self.dialogruleVisible = true;
        console.log(selectionArr[0]);
        self.$nextTick(() => {
          self.RtEruleForm.id = selectionArr[0].id;
          self.RtEruleForm.dayType = selectionArr[0].dayType;
          self.RtEruleForm.name = selectionArr[0].name;
          self.RtEruleForm.type = selectionArr[0].type;
          self.RtEruleForm.workType = selectionArr[0].workType;
          self.RtEruleForm.endTime = selectionArr[0].endTime;
          self.RtEruleForm.startTime = selectionArr[0].startTime;
        });
      }
    },
    //编辑
    editWorkingRuleSubmit(formName) {
      let self = this;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          ajax.post({
            url: this.$API.modifyWorkingRule,
            data: self.RtEruleForm,
            success: (response) => {
              //console.log(response)
              if (response.success) {
                this.dialogruleVisible = false;
                // 成功后，重新获取数据
                this.$message({
                  type: "success",
                  message: response.message,
                });
                self.getrRtEruledata();
                this.getavailableEtRRuleData();
                this.gethaveEtRRuleData();
                self.$refs.multipleTable.clearSelection();
              }
            },
            error: (res) => {
              //console.log(res)
              this.$message({
                message: res.message,
                type: "error",
              });
            },
          });
        }
      });
    },
    //规则点击行 刷新设备
    handleRtQruleChange(row) {
      this.RtEruleid = row.id;
      this.RtEruleindex = row.index;
      this.gztitle=row.name
      this.getRtERequipmentdata();
    },
    //通过规则获取设备
    getRtERequipmentdata() {
      let self = this;
      ajax.get({
        url: this.$API.queryRulehasDevice+ self.RtEruleid,
       
        success: (res) => {
          let resp = res.data;
          self.equipmentData = resp;
        },
      });
    },
    //规则翻页
    rterulehandleSizeChange(value) {
      this.rterulepageSize = value;
      this.getrRtEruledata();
    },
    rtehandlePageChange(value) {
      this.rterulecurrentPage = value;
      this.getrRtEruledata();
    },
    //设备多选
    handequipmentChange(value) {
      this.quipmenSelection = value;
    },
    //添加设备弹窗
    handleAddequipment() {
      this.dialogAddAreaVisible = true;
      this.areaTreeData = [];
      this.organId = null;
      this.checkList = [];
    },
    // 获取通道类型数据
    getTargetCategoryData() {
      ajax.get({
        url: this.$API.getDictTargetCategoryList,
        data: {},
        success: (response) => {
          //console.log(response)
          let channelTargetCategory = response.data;
          channelTargetCategory.forEach((item) => {
            if (item.enabled === 1) {
              this.channelTargetCategory.push(item);
            }
          });
        },
        error: (res) => {
          //console.log(res)
          this.$message({
            message: res.message,
            type: "error",
          });
        },
      });
    },

    // table每行加上index
    tableRowClassName({ row, rowIndex }) {
      row.index = rowIndex;
    },
    tableRowEtRequipmentClassName({ row, rowIndex }) {
      row.index = rowIndex;
    },
    //区域勾选
    dialogTreeChange() {
      let checkArr = this.$refs.refdialogAreaTree.getCheckedNodes();
      this.dialogAreaNodeCheck = checkArr;
      // console.log(this.dialogAreaNodeCheck);
    },
    //规则设备 添加设备
    submitAddAreaquipment() {
      // if (this.checkList.length == 0) {
      //   this.$message({
      //     message: "请先选择设备类型",
      //     type: "warning",
      //   });
      //   return;
      // }
      if (this.dialogAreaNodeCheck.length == 0) {
        this.$message({
          message: "请先选择区域",
          type: "warning",
        });
        return;
      }

      let dialogAreaNodeCheckArr = this.dialogAreaNodeCheck;
      let id = this.RtEruleid;
      let areaIdArr = [];
      for (let item of dialogAreaNodeCheckArr) {
        areaIdArr.push(item.id);
      }
      let areaId = areaIdArr.join(",");
      let targetCategoryIdStr = this.checkList.join(",");
      ajax.post({
        url: this.$API.addDevicetorule+ `${id}/${areaId}/${targetCategoryIdStr}`,
        success: (response) => {
          // console.log(response)
          if (response.success) {
            this.dialogAddAreaVisible = false;
            this.$message({
              message: "新增成功",
              type: "success",
            });
            this.getRtERequipmentdata();
            this.getEtRequipmentdata();
          }
        },
        error: (res) => {
          this.$message({
            message: res.message,
            type: "error",
          });
        },
      });
    },
    //删除规则中的设备
    handleDelequipment() {
      let self = this;
      let selectionArr = this.quipmenSelection;
      let selResult = tableSelection(selectionArr, 0);
      if (selResult) {
        deleteConfirm(this).then((res) => {
          if (res) {
            let idsArr = [];
            for (let item of selectionArr) {
              idsArr.push(item.id);
            }
            let ids = idsArr.join(",");
            ajax.post({
              url: this.$API.deletedevicehasrule,
              data: { ids: ids },
              success: (response) => {
                //console.log(response)
                if (response.success) {
                  // 成功后，重新获取数据
                  this.getRtERequipmentdata();
                  //设备列表刷新
                  this.getEtRequipmentdata();
                  self.$refs.equipmentTable.clearSelection();
                  self.$message({
                    type: "success",
                    message: response.message,
                  });
                }
              },
              error: (res) => {
                //console.log(res)
                this.$message({
                  message: res.message,
                  type: "error",
                });
              },
            });
          }
        });
      }
    },

    // 获取所有网点信息
    getOrganListData() {
      ajax.get({
        url: this.$API.getUserOrgan +this.$store.getters.user.id,
        success: (res) => {
          if (res.data.length > 0) {
            this.organOptions = res.data;
          } else {
            this.organOptions = [];
          }
        },
        error: (err) => {
          this.$message({
            message: err.message,
            type: "error",
          });
        },
      });
    },

    //获取可选择区域列表数据
    selectOrganChange(value) {
      this.organId = value;
      this.getAreaListData();
    },
    getAreaListData() {
      ajax.get({
        url: this.$API.getAreaTreeByOrganId + this.organId,
        success: (res) => {
          this.areaTreeData = res.data;
        },
        error: (err) => {
          // console.log(err)
          this.$message({
            message: err.message,
            type: "error",
          });
        },
      });
    },
    //设备规则

    getEtRequipmentdata() {
      let self = this;
      ajax.get({
        url: this.$API.queryHasruledevice + `${self.etrequipmentcurrentPage}/${self.etrequipmentpageSize}`,
        success: (res) => {
          let resp = res.data.records;
          self.EtRequipmentdata = resp;
          
          self.etrequipmenttotal = res.data.recordNum;
          if (resp!="" && resp.length > 0) {
            self.$nextTick(() => {
              let index = self.tableEtRequipmentIndex;
              self.$refs.refEtRequipmentdata.setCurrentRow(
                self.$refs.refEtRequipmentdata.data[index]
              );
              self.EtRequipmentprobeId = self.EtRequipmentdata[index].probeId;
              self.EtRequipmentprobeChannel =
                self.EtRequipmentdata[index].probeChannel;
              self.gethaveEtRRuleData();
              self.getavailableEtRRuleData();
            });
          } else {
            this.EtRequipmentdata = [];
            this.haveEtRRuleData = [];
            this.availableEtRRuleData = [];
          }
        },
      });
    },
    //选中
    handleEtRequipmentChange(row) {
      this.tableEtRequipmentIndex=row.index
      this.EtRequipmentprobeId = row.probeId;
      this.EtRequipmentprobeChannel = row.probeChannel;
      this.gethaveEtRRuleData();
      this.getavailableEtRRuleData();
      // this.gethaveEtRRuleData();
      // this.getavailableEtRRuleData();
    },
    //设备翻页
    etrequipmenthandleSizeChange(value) {
      
      this.etrequipmentpageSize = value;
      this.getEtRequipmentdata();
    },
    etrequipmenthandlePageChange(value) {
      this.etrequipmentcurrentPage = value;
      this.getEtRequipmentdata();
    },
    //获取设备已有规则
    gethaveEtRRuleData() {
      let self = this;
      ajax.get({
        url: this.$API.queryDevicehasrule + `${this.EtRequipmentprobeId}/${this.EtRequipmentprobeChannel}`,
        success: (res) => {
          let resp = res.data;
          self.haveEtRRuleData = resp;
        },
      });
    },
    //获取设备可配规则
    getavailableEtRRuleData() {
      let self = this;
      ajax.get({
        url: this.$API.queryDevicenothasrule +`${this.EtRequipmentprobeId}/${this.EtRequipmentprobeChannel}`,
        success: (res) => {
          let resp = res.data;
          self.availableEtRRuleData = resp;
        },
      });
    },
    //勾选已有规则
    handleEtRRuleDataGroupSel(nodeData, checkData) {
      this.multipleEtRRuleGroupSel = checkData.checkedNodes;
    },
    //勾选可配规则
    handleAvailableEtRRuleDataGroupSel(nodeData, checkData) {
      this.multipleEtRRuleAvailableGroupSel = checkData.checkedNodes;
    },
    dialogHandleGroupChange(type) {
      if (type === "add") {
        let multipleEtRRuleAvailableGroupSelArr =
          this.multipleEtRRuleAvailableGroupSel;
        let IdArr = [];

        for (let item of multipleEtRRuleAvailableGroupSelArr) {
          IdArr.push(item.id);
        }
        let Ids = IdArr.join(",");
        let probeId = this.EtRequipmentprobeId;
        let probeChannel = this.EtRequipmentprobeChannel;
        ajax.post({
          url: this.$API.addRuletodevice+`${Ids}/${probeId}/${probeChannel}`,
          success: (response) => {
            //console.log(response)
            if (response.success) {
              // 成功后，重新获取数据
              this.getRtERequipmentdata();
              //设备列表刷新
              this.gethaveEtRRuleData();
              this.getavailableEtRRuleData();
              self.$refs.refavailableEtRRuleData.clearSelection();
              self.$refs.refhaveEtRRuleData.clearSelection();
              self.$message({
                type: "success",
                message: response.message,
              });
            }
          },
          error: (res) => {
            //console.log(res)
            this.$message({
              message: res.message,
              type: "error",
            });
          },
        });
      } else {
        let multipleEtRRuleGroupSelArr = this.multipleEtRRuleGroupSel;
        let wrdIdArr = [];
        for (let item of multipleEtRRuleGroupSelArr) {
          wrdIdArr.push(item.wrdId);
        }
        let wrdIds = wrdIdArr.join(",");
        ajax.post({
          url: this.$API.deletedevicehasrule + wrdIds,
          success: (response) => {
            //console.log(response)
            if (response.success) {
              // 成功后，重新获取数据
              this.getRtERequipmentdata();
              //设备列表刷新
              this.getEtRequipmentdata()
              this.gethaveEtRRuleData();
              this.getavailableEtRRuleData();
              self.$refs.refavailableEtRRuleData.clearSelection();
              self.$refs.refhaveEtRRuleData.clearSelection();
              self.$message({
                type: "success",
                message: response.message,
              });
            }
          },
          error: (res) => {
            //console.log(res)
            this.$message({
              message: res.message,
              type: "error",
            });
          },
        });
      }
      this.multipleEtRRuleAvailableGroupSel = [];
      this.multipleEtRRuleGroupSel = [];
    },
    //获取日期类型
    getCustomerAvailableData(){
       ajax.get({
          url: this.$API.getCustomerAvailableList,
          success: (response) => {
         
              if (response.success) {
                this.$nextTick(() => {
                  this.Defaultoptionslist=response.data
                  Defaultoptionslistc=response.data
                })
              }
          },
          error: (res) => {
            this.$message({
              message: res.message,
              type: "error",
            });
          },
        });
    },
  },
  filters: {
    typefilters(index) {
      switch (index) {
        case 0:
          return `常开`;
        case 1:
          return `常关`;
      }
    },
    worktypefilters(index) {
      return Defaultoptionslistc.find(data=>data.dayType==index).dayName
    },
  },
};
</script>

<style lang="stylus" scoped>
@import '~@/assets/styles/variables.styl';

.ruleequipment-tab-title-row {
  height: 0.5rem;
  background-color: #0d2c5a;
  border-bottom: solid 0.01rem #0d235a;
  -webkit-box-shadow: inset 0px 5px 20px 0px rgba(80, 160, 191, 0.5);
  box-shadow: inset 0px 5px 20px 0px rgba(80, 160, 191, 0.5);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin-bottom: 0.1rem;

  div {
    width: 2rem;
    height: 0.44rem;
    line-height: 0.44rem;
    margin-left: 0.08rem !important;
    border-radius: 5px 5px 0px 0px;
    border: solid 1px #0d235a !important;
    border-bottom: 0 !important;
    margin-top: 0.06rem !important;
    color: #fff !important;
    font-size: 0.16rem !important;
    padding: 0 20px;
    display: inline-block;
    box-sizing: border-box;
    cursor: pointer;
  }

  .ruleequipmenttype_on {
    background-color: #16214d !important;
    color: #fff !important;
  }
}

.working-hours-container {
  position: absolute;
  top: 0.5rem;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.2rem;
  overflow: auto;
  background-color: $pageBg;
}

>>>.dialogrule_worktype .el-checkbox__label {
  color: #fff;
}

>>>.el-checkbox__input.is-checked+.el-checkbox__label {
  color: #409EFF;
}

.equipment-add {
  color: #Fff;
  padding-top: 20px;
  padding-bottom: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.equipment-title {
  display: flex;
  margin-bottom: 10px;
}

>>>.equipment-title .el-checkbox__label {
  color: #fff;
}
>>>.equipment-title .el-checkbox{
    min-width: 81px;
    margin-right: 10px;}
.r-t-e-rule-row {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 7rem;
  padding: 0.2rem;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: #16214d;
  overflow: auto;
}

.r-t-e-equipment-row {
  position: absolute;
  left: 7rem;
  right: 0;
  top: 0;
  bottom: 0;
  padding: 0.2rem;
  overflow: auto;
  background: #202c5f;
}

.e-t-r-equipment-row {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 7rem;
  padding: 0.2rem;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: #16214d;
  overflow: auto;
}

.e-t-r-rule-row {
  position: absolute;
  left: 7rem;
  right: 0;
  top: 0;
  bottom: 0;
  padding: 0.19rem 0.2rem;
  overflow: auto;
  background: #202c5f;
}

>>>.el-table--striped .el-table__body tr.el-table__row--striped.current-row td, >>>.el-table__body tr.current-row > td {
  color: #fff;
  background-color: rgba(68, 199, 244, 0.2) !important;
}

.e-t-r-rule-box {
  display: flex;
}

.left, .right {
  width: 360px;
  height: 8.1rem;
  padding: 10px;
  border: 1px solid #fff;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.dialog-group-btn {
  width: 200px;
  padding: 0.2rem;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.dialog-group-btn .el-button {
  display: block;
  margin: 0.2rem auto;
}
.dialogrule_worktype .el-radio {
    margin-bottom: 10px;
}
</style>